<script setup lang="ts">
import { computed, watch, ref } from 'vue'
const props = defineProps({
  current: {
    type: Number,
    required: true,
    default: 1,
  },
  pageSize: {
    type: Number,
    required: true,
    default: 10,
  },
  total: {
    type: Number,
    required: true,
    default: 0,
  },
  pageChange: {
    type: Function,
    required: true,
  },
})
const pageNumber = computed(() => Math.ceil(props.total / props.pageSize))
const min = computed(() => {
  const min = props.current - 2
  if (min < 1) return 1
  return min
})
const max = computed(() => {
  const max = props.current + 2
  if (max > pageNumber.value) return pageNumber.value
  return max
})
const numbers = computed(() => {
  const numbers: number[] = []
  for (let i = min.value; i <= max.value; i++) {
    numbers.push(i)
  }
  return numbers
})

const pageSizeChange = (val: number) => {
  props.pageChange({ pageSize: val, pageIndex: 1 })
}
const toPage = (i: number) => {
  if (i === props.current) return
  props.pageChange({ pageIndex: i, pageSize: props.pageSize })
}

const inputVal = ref()
const timer = ref()
watch(
  () => inputVal.value,
  () => {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      inpChange(inputVal.value)
    }, 500)
  },
)
const inpChange = (val: string) => {
  let v = Number(val)
  if (Number.isNaN(v)) return
  if (v < 0) v = 1
  if (v) {
    const page = v > pageNumber.value ? pageNumber.value : v
    toPage(page)
  }
}
</script>

<template>
  <div class="pager-box">
    <span class="total">共 {{ total }} 条</span>
    <el-select :model-value="pageSize" @change="pageSizeChange" :teleported="false">
      <el-option :value="10" label="10条/页" />
      <el-option :value="20" label="20条/页" />
      <el-option :value="30" label="30条/页" />
      <el-option :value="40" label="40条/页" />
      <el-option :value="50" label="50条/页" />
      <el-option :value="100" label="100条/页" />
    </el-select>
    <span :class="current === 1 || pageNumber === 0 ? 'first disabled' : 'first'" @click="toPage(1)"
      >首页</span
    >
    <span
      :class="current === 1 || pageNumber === 0 ? 'pre disabled' : 'pre'"
      @click="toPage(current - 1 < 1 ? 1 : current - 1)"
    />
    <span v-if="min !== 1" :class="current === 1 ? 'item active' : 'item'" @click="toPage(1)"
      >1</span
    >
    <span class="ellipsis" v-if="min > 2">...</span>
    <span
      v-for="i in numbers"
      :key="i"
      :class="current === i ? 'item active' : 'item'"
      @click="toPage(i)"
      >{{ i }}</span
    >
    <span class="ellipsis" v-if="max < pageNumber - 1">...</span>
    <span
      v-if="max !== pageNumber"
      :class="current === pageNumber ? 'item active' : 'item'"
      @click="toPage(pageNumber)"
      >{{ pageNumber }}</span
    >
    <span
      :class="current === pageNumber || pageNumber === 0 ? 'next disabled' : 'next'"
      @click="toPage(current + 1 > pageNumber ? pageNumber : current + 1)"
    />
    <span
      :class="current === pageNumber || pageNumber === 0 ? 'first disabled' : 'first'"
      @click="toPage(pageNumber)"
      >末页</span
    >
    跳至<el-input v-model="inputVal" />页
  </div>
</template>

<style lang="scss" scoped>
.pager-box {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #334d6d;
  .el-select {
    width: 100px;
    height: 28px;

    :deep(.select-trigger) {
      height: 28px;

      .el-input {
        height: 28px;

        .el-input__wrapper {
          height: 28px;
          line-height: 28px;
          border-radius: 2px;
        }
      }
    }
  }

  span {
    display: inline-block;
    height: 28px;
    padding: 0 5px;
    margin-right: 6px;
    font-size: 14px;
    line-height: 28px;
    color: #334d6d;
    text-align: center;
    letter-spacing: 0;
    cursor: pointer;
    border: solid 1px #ccc;
    border-radius: 2px;
    transition: all 0.3s;

    &.item,
    &.pre,
    &.next {
      min-width: 28px;

      &:hover:not(.active, .disabled) {
        color: #007eff;
        background-color: rgb(0 144 255 / 30%);
        border: solid 1px #0090ff;
      }
    }

    &.pre {
      background-image: url('@/assets/images/04_predef-icon_01.png');
      background-repeat: no-repeat;
      background-position: center;

      &:hover {
        background-image: url('@/assets/images/04_prehover-icon_02.png');
      }

      &.disabled {
        background-image: url('@/assets/images/04_predis-icon_03.png');
      }
    }

    &.next {
      background-image: url('@/assets/images/04_nextdef-icon_01.png');
      background-repeat: no-repeat;
      background-position: center;

      &:hover {
        background-image: url('@/assets/images/04_nexthover-icon_02.png');
      }

      &.disabled {
        background-image: url('@/assets/images/04_nextdis-icon_03.png');
      }
    }

    &.ellipsis {
      cursor: default;
      border: none;
    }

    &.disabled {
      color: #b5b5b5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #f5f5f5;
      border: solid 1px #dcdcdc;
    }

    &.first {
      padding: 0 10px;
      margin-left: 6px;

      &:hover:not(.active, .disabled) {
        color: #007eff;
        background-color: rgb(0 144 255 / 30%);
        border: solid 1px #0090ff;
      }

      &:last-of-type {
        margin-left: 0;
      }
    }

    &.total {
      cursor: default;
      border: none;
    }

    &.active {
      color: #fffefe;
      cursor: auto;
      background-color: #0090ff;
    }
  }

  .el-input {
    width: 58px;
    height: 28px;
    padding: 0;
    margin: 0 6px;
    font-size: 14px;
    line-height: 28px;
    color: #334d6d;
    border-radius: 2px;

    :deep(.el-input__wrapper) {
      border-radius: 2px;

      .el-input__inner {
        text-align: center;
      }
    }
  }
}
</style>
